<!--菜单管理-->
<template>
  <div class="menu-com">
    <Row>
      <Col span="5" class="tree-box">
        <Dropdown @on-click="handleContextMenuAdd">
          <Button type="primary" style="margin-bottom: 15px">
            配置
            <Icon type="ios-arrow-down"></Icon>
          </Button>
          <DropdownMenu slot="list">
            <DropdownItem name="0">添加一级菜单</DropdownItem>
            <DropdownItem name="1">添加下级菜单</DropdownItem>
          </DropdownMenu>
        </Dropdown>
        <Input
          search
          placeholder="请输入关键词"
          v-model="keywords"
          @on-change="onSearchTree"
        />
        <div class="tree-left-box">
          <Tree :data="treeData" @on-select-change="handleContextMenu">
            <template slot="contextMenu">
              <DropdownItem
                @click.native="handleContextMenuDelete"
                style="color: #ed4014"
                >删除</DropdownItem
              >
            </template>
          </Tree>
        </div>
      </Col>
      <Col span="19" class="form-box com-show-input-border">
        <h3>编辑菜单</h3>
        <Form ref="formData" :rules="ruleValidate" :model="formData">
          <Row :gutter="30">
            <Col span="12">
              <FormItem label="菜单/按钮名称" prop="menuName">
                <div style="width: 100%">
                  <Input
                    v-model="formData.menuName"
                    placeholder="请输入"
                  ></Input>
                </div>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="类型" prop="type">
                <RadioGroup v-model="formData.type">
                  <Radio label="Menu">菜单</Radio>
                  <Radio label="Button">按钮</Radio>
                </RadioGroup>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="是否显示" prop="isShow">
                <RadioGroup v-model="formData.isShow">
                  <Radio label="true">显示</Radio>
                  <Radio label="false">隐藏</Radio>
                </RadioGroup>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="图标设置">
                <i-icon-select
                  v-model="formData.icon"
                  clearable
                  placeholder="请设置一个图标"
                  search
                  show-title
                  :icon-list="iconList"
                />
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="排序号" prop="orderNumber">
                <InputNumber
                  style="width: 100%"
                  v-model="formData.orderNumber"
                  placeholder="请输入"
                ></InputNumber>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="页面参数" prop="pageParam">
                <Input
                  v-model="formData.pageParam"
                  placeholder="请输入菜单标识"
                ></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="PC关键字" prop="pageKey">
                <Input
                  v-model="formData.pageKey"
                  placeholder="请输入PC关键字"
                ></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="APP关键字" prop="appPageKey">
                <Input
                  v-model="formData.appPageKey"
                  placeholder="请输入APP关键字"
                ></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="APP标识" prop="appPageKey">
                <Input
                  v-model="formData.appPageKey"
                  placeholder="请输入菜单标识"
                ></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="路由地址" prop="routePath">
                <Input
                  v-model="formData.routePath"
                  placeholder="请输入路由地址"
                ></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="路由名称" prop="routeName">
                <Input
                  v-model="formData.routeName"
                  placeholder="请输入路由名称"
                ></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="组件地址" prop="componentPath">
                <Input
                  v-model="formData.componentPath"
                  placeholder="请输入组件地址"
                ></Input>
              </FormItem>
            </Col>

            <Col span="12">
              <FormItem label="备注信息" prop="remark">
                <Input
                  v-model="formData.remark"
                  placeholder="请输入备注信息"
                ></Input>
              </FormItem>
            </Col>
          </Row>

          <Row type="flex" justify="space-between">
            <Col class="com-action-btn">
              <BtnPlain type="primary" @click="handleReset('formData')"
                >重置</BtnPlain
              >
              <BtnPlain
                type="error"
                :loading="isDelLoading"
                @click="handleDetele()"
                >删除菜单</BtnPlain
              >
            </Col>
            <Col>
              <Button
                type="primary"
                :loading="isLoading"
                @click="handleSubmit('formData')"
                >保存</Button
              >
            </Col>
          </Row>
        </Form>
      </Col>
    </Row>
    <ChildMenu
      v-if="isHide"
      :isHide="isHide"
      :updateIsHide.sync="isHide"
      :echoData="echoData"
      @actionSuccess="actionSuccess"
    />
  </div>
</template>

<script type="text/javascript">
import iconList from "@/libs/icon-list";
import ChildMenu from "./childMenu";

import {
  getMenuTree, // 获取菜单
  delMenu, // 删除菜单
  updateMenu, // 修改菜单
  detailMenu, // 菜单详情
  addMenu, // 添加菜单
} from "@/api/system.js";

export default {
  name: "menuPage",
  components: {
    ChildMenu,
  },
  props: {
    ownType: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      iconList,
      keywords: "",
      treeData: [],
      formData: {
        permissionMenuId: "",
        menuName: "",
        parentId: "",
        pageKey: "",
        appPageKey: "",
        icon: "",
        pageParam: "",
        remark: "",
        type: "Menu",
        orderNumber: 0,
        ownType: "Platform", // Platform 平台端 User  用户端
        routePath: "",
        routeName: "",
        componentPath: "",
        isShow: "true", // 显示隐藏
      },
      ruleValidate: {
        menuName: [
          {
            required: true,
            message: "请输入菜单名称",
            trigger: "change",
          },
        ],
        isShow: [
          {
            required: true,
            message: "请输入菜单名称",
            trigger: "change",
          },
        ],
      },
      isLoading: false,
      isHide: false,
      echoData: {},
      treeBaseData: [],
      isDelLoading: false,
    };
  },
  methods: {
    async updateMenuAction() {
      this.isLoading = true;
      try {
        let data = await updateMenu(this.formData);
        this.$Message.success("菜单修改成功！");
        this.isLoading = false;
        this.getMenuTreeData();
      } catch (error) {
        this.isLoading = false;
      }
    },
    async addMenuAction() {
      this.isLoading = true;
      try {
        let data = await addMenu(this.formData);
        this.$Message.success("菜单添加成功！");
        this.isLoading = false;
        this.getMenuTreeData();
      } catch (error) {
        this.isLoading = false;
      }
    },
    // 获取菜单详情
    async detailMenuAction(menuId) {
      let params = {
        menuId,
      };
      let data = await detailMenu(params);
    },
    async getMenuTreeData() {
      let params = {
        ownType: this.$props.ownType,
      };
      let data = await getMenuTree(params);
      console.log(data, "getMenuTreeData");
      const filterFn = (list) => {
        console.log(list, "getMenuTreeData1");
        list.forEach((o) => {
          o.title = o.menuName;
          o.expand = true;
          o.children = o.childrenMenuList ? o.childrenMenuList : [];
          filterFn(o.children);
        });
        return list;
      };
      this.treeData = filterFn(data);
      this.treeBaseData = JSON.parse(JSON.stringify(this.treeData));
    },
    // 左侧树形图搜索框
    onSearchTree(ev) {
      this.treeData = this.treeBaseData.filter((o) => {
        return o.title.indexOf(this.keywords) > -1;
      });
      console.log(filterFn(this.treeBaseData), this.treeData);
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    handleSubmit(name) {
      console.log(name, "name");
      this.$refs[name].validate((valid) => {
        console.log(valid, "name");
        if (valid) {
          if (this.echoData.permissionMenuId) {
            this.formData.permissionMenuId = this.echoData.permissionMenuId;
            this.updateMenuAction();
          } else {
            this.formData.permissionMenuId = "";
            this.formData.parentId = 0;
            this.addMenuAction();
          }
        }
      });
    },
    // 删除
    async handleDetele() {
      if (!this.echoData.permissionMenuId) {
        return this.$Message.error("请选择需要删除的菜单！");
      }
      let params = {
        menuIdList: [this.echoData.permissionMenuId],
      };
      this.isDelLoading = true;
      let data = await delMenu(params);
      this.$refs.formData.resetFields();
      this.isDelLoading = false;
      this.$Message.success("删除菜单成功！");
      this.getMenuTreeData();
    },
    handleContextMenu(data) {
      let item = data[0];
      if (item) {
        this.echoData = item;
        this.formData = item;
        this.formData.isShow = this.formData.isShow + ''
        this.detailMenuAction(item.permissionMenuId);
      } else {
        this.echoData = {};
        this.$refs.formData.resetFields();
      }
      console.log(data, "112233");
    },
    handleContextMenuAdd(data) {
      console.log(data, "data");
      if (data == "0") {
        this.formData.parentId = 0;
      } else {
        if (!this.echoData.title) {
          return this.$Message.error("请选择上级菜单");
        }
        this.formData.parentId = this.echoData.permissionMenuId;
      }
      this.formData.ownType = this.$props.ownType;
      this.echoData = this.formData;
      this.isHide = true;
    },
    handleContextMenuEdit(ev) {
      this.isHide = true;
      console.log(ev, "22");
    },
    handleContextMenuDelete(ev) {
      console.log(ev, "33");
    },
    // 菜单添加成功
    actionSuccess() {
      this.isHide = false;
      this.getMenuTreeData();
    },
  },
  mounted() {
    this.getMenuTreeData();
  },
};
</script>

<style scoped lang="less">
.menu-com {
  margin-top: -16px;
}
.tree-box {
  padding: 20px 20px 0 15px;
  border-right: 1px solid #eee;
  max-height: 80vh;
  overflow: auto;
  .btn {
    margin-bottom: 20px;
  }
}
.form-box {
  padding: 20px 0 0 20px;
}
.ivu-radio-group {
  width: 100%;
}
.tree-left-box {
  margin-top: 15px;
}
</style>
